<template>
	<view class="w94">
		<u-navbar bg-color="transparent" leftIconColor="#fff" title="油站详情" :titleStyle="{
			color:'#fff'
		}" :placeholder="true" :autoBack="true"></u-navbar>
		<view class="header ">
			<view class="flex-between">
				<view class="self-center ">
					<u-image :src="proInfo.logo" height="60" width="60"></u-image>
				</view>
				<view class="intro ">
					<view class="flex-between one">
						<u-text :text="proInfo.name" bold size="18"></u-text>
						<view class="address">
							<text class="custom-icon custom-icon-weizhi" style="font-size: 22rpx;"></text>
							<!-- <u-icon name="weizhi" customPrefix="custom-icon" size="10"></u-icon> -->
							<!-- <text class="ml5">距您 1.2 KM</text> -->
							<text if="distance !== null" class="result ml5" @click="$u.throttle(navigateToTarget, 500)">
								距您 {{ (proInfo.distance*1000).toFixed(2) || 0 }} 公里
							</text>
						</view>
					</view>
					<view class="two mt5">
						<u-text size="12" lines="1" type="info" :text="proInfo.address"></u-text>
					</view>
					<view class="flex-between mt5">
						<view class="tag-box ">
							<view class="tag">24小时营业</view>
						</view>
						<view class="more self-center">
							<text class="" @click="$u.throttle(openDetail, 500)">详情</text>
						</view>
					</view>

				</view>
			</view>
			<u-divider></u-divider>
			<view class="oil-price flex">
				<view class="item">
					<text>￥</text><text class="one">{{(oilPrice*proInfo.disc).toFixed(2)||7.55}}</text><text>/升</text>
				</view>
				<view class="item">
					油站价￥{{oilPrice2||7.55}}/升
				</view>
				<view class="item">
					指导价￥{{oilPrice||7.55}}/升
				</view>
				<view class="item">
					<u-icon name="info-circle" color="#909399" size="24rpx"></u-icon>
				</view>
			</view>
		</view>
		<view class="bg"></view>
		<view class="method">
			<view class="flex-between">
				<view class="title self-center">提油方式</view>
				<view class="flex">
					<view class="deliveryMethod  mr5" :class="buyData.deliveryMethod == 0 ?' active' : ''"
						@click="buyData.deliveryMethod = 0">
						站内订单
					</view>

					<view class="deliveryMethod" :class="buyData.deliveryMethod == 1 ?' active' : ''"
						@click="isPeiSong">
						配送订单
					</view>
				</view>
			</view>

			<view class="address flex-between" v-show="buyData.deliveryMethod == 1">
				<view class="title self-center">收货地址</view>
				<view class="text flex-between" @click="$u.throttle(selectAddress, 500)">

					<text v-if="!addressData.id">请选择收货地址</text>

					<view v-else style="text-align: right;width: 450rpx;">

						<!-- <view class="hidden-text mt5">{{addressData.phone}}</view> -->
						<!-- <view class="hidden-text mt5">{{addressData.site}}</view> -->
						<view class="hidden-text mt5">
							{{addressData.province+''+addressData.city+''+addressData.address}}
						</view>
					</view>
					<view class="self-center"> <u-icon name="arrow-right" size="14"></u-icon></view>
				</view>
			</view>
		</view>
		<!-- 油品选择 -->
		<view class="mt10 oil-type">
			<text class="desc mb5">请选择购油类型</text>
			<view style="display: flex;">
				<view class="box" :class="typeTab==index?'active':''" v-for="(item,index) in typeList" :key="index"
					@click="changeType(item,index)">{{item.type}} <text
						v-show="typeTab==index">{{proInfo.Gun+' '+proInfo.GunNum}}</text> </view>
			</view>
		</view>
		<!-- 购买金额 -->
		<view class="price-box mt10">
			<text class="desc mt5">请选择购油金额</text>
			<view class="input flex ">
				<text style="color: #ff4110;" class="self-center">￥</text>
				<u-input border="none" type="number" @blur="buyPrice" v-model="buyprice" placeholder="请输入购油金额"
					:placeholder-style="{
					color:'#ff4110',
					fontSize:'13px'
				}" fontSize="23" color="#ff4110"></u-input>
			</view>

			<view class="recommend flex mt10">
				<view class="item" :class="priceTab==index?'active':''" v-for="(item,index) in priceList" :key="index"
					@click="changePrice(item,index)">￥{{item.price}}</view>
			</view>
		</view>

		<view class="card flex-between">
			<view class="title self-center">优惠券</view>
			<view class="text flex-between" @click="$u.throttle(selectCoupon, 500)">

				<text v-if="!couponData.id" style="color: #5a5a5a;font-size: 30rpx;">请选择优惠券</text>

				<view v-else style="text-align: right;width: 450rpx;">

					<!-- <view class="hidden-text mt5">{{addressData.phone}}</view> -->
					<!-- <view class="hidden-text mt5">{{addressData.site}}</view> -->
					<view class="hidden-text" v-if="couponData.couponInfo.ctype=='满减券'">
						{{'满'+couponData.couponInfo.fullAmount+'-'+couponData.couponInfo.amount}}
					</view>
					<view class="hidden-text" v-else-if="couponData.couponInfo.ctype=='抵扣券'">
						-{{couponData.couponInfo.amount}}￥</view>
					<view class="hidden-text" v-else>{{couponData.couponInfo.cardDisc*10}}折</view>
				</view>
				<view class="self-center"> <u-icon name="arrow-right" size="14"></u-icon></view>
			</view>
		</view>

	</view>
	<!-- 底部支付按钮 -->
	<view class="footer">
		<view class="flex-between" style="padding: 0 20rpx;">
			<view>
				<view class="self-center price">￥{{Price||0.00}}</view>
				<view class="mingxi" @click="discountsShow=true">
					优惠明细
				</view>
			</view>
			<view class="btn">
				<u-button type="primary" shape="circle" @click="goPay"> 立即支付</u-button>
				<!-- <u-button type="primary" shape="circle" @click="$u.throttle(goPay, 500)"> 立即支付</u-button> -->
			</view>
		</view>
	</view>
	<!-- 优惠明细弹框 -->
	<u-popup :show="discountsShow" @close="discountsShow=false">
		<view class="coupon mt10">
			<text>优惠明细</text>
			<view class="cell mt10">

				<view class="item flex-between mt10" v-if="isOK">
					<view class="flex">
						<view class="ml5" style="font-size: 28rpx;font-weight: 600;">加油币抵扣</view>
					</view>
					<view class="number">-{{oilDisc?oilDisc.oilCoinConsumptionRatio*10:0}}</view>
					<!-- <view class="number" v-if="couponData?.couponInfo?.isDeduction">-{{oilDisc?oilDisc.oilCoinConsumptionRatio*10:0}}</view> -->
				</view>
				<view class="item flex-between mt10" v-if="couponData?.couponId">
					<view class="flex">
						<view class="ml5" style="font-size: 28rpx;font-weight: 600;">优惠券抵扣</view>
					</view>
					<view class="hidden-text" v-if="couponData?.couponInfo.ctype=='满减券'">
						-{{couponData?.couponInfo.amount}}</view>
					<view class="hidden-text" v-else-if="couponData?.couponInfo.ctype=='抵扣券'">
						-{{couponData?.couponInfo.amount}}</view>
					<view class="hidden-text" v-else>{{couponData?.couponInfo.cardDisc*10}}折</view>
				</view>
			</view>
			<u-divider></u-divider>
			<view style="text-align: right;">合计 <text>-{{buyprice-Price}}￥</text></view>
		</view>
	</u-popup>
	<!-- 油枪选择弹框 -->
	<u-popup :show="oliShow" @close="oliShow=false" :closeOnClickOverlay="false" :closeable="true">
		<view class="oliPopup">
			<text>油号</text>
			<view>
				<!-- <text v-for="(item,index) in 8">{{item}}</text> -->
				<text v-for="(item,index) in spiceSetList" @click="getGunNum(item,index)"
					:class="currentIndex==index?'active':''" :key="index">{{item}}</text>
			</view>
			<text>油枪</text>
			<view>
				<!-- <text v-for="(item,index) in 10">{{item}}</text> -->
				<text v-for="(item,index) in gunNumList" @click="changeGunNum(item,index)"
					:class="current2Index==index?'active':''" :key="index">{{item.gunNum}}</text>
			</view>
		</view>
	</u-popup>
	<!-- 油站详情弹框 -->
	<u-popup :show="detailPopup" closeable mode="bottom" :round="10" closeOnClickOverlay @close="detailPopup = false">
		<view class="detailPopup">
			<view class="title">油站详情</view>
			<view class="item">
				<view class="item-title">油站开票</view>
				<view class="body">
					发票需油站当天开具，请务必现场咨询油站，过期可能无法回溯发票。
				</view>
			</view>
			<view class="item flex-between">
				<view class="item-title">营业资质</view>
				<view class="youjiantou self-center" @click="check"><text>查看</text><text
						class="custom-icon-youjiantou-copy custom-icon youjiantou" style="font-size: 20rpx;"></text>
				</view>
			</view>
			<view class="item">
				<view class="flex-between">
					<view class="item-title" style="margin-bottom: 0;">
						油站评价</view>

					<view class="youjiantou self-center" @click="more"><text>更多</text><text
							class="custom-icon-youjiantou-copy custom-icon youjiantou" style="font-size: 20rpx;"></text>
					</view>
				</view>

				<view class="body">
					<view class="flex">
						<view class="mr10">
							<u-rate :count="count" v-model="value" readonly :allowHalf="true"></u-rate>
						</view>
						<u-text :text='value>3?"优秀":"中等"' size="28rpx" color="#909399"></u-text>

					</view>
					<view class="list flex flex-wrap">
						<view class="list-item" v-for="(item,index) in list" :key="index">
							{{item.name}}({{item.count}})
						</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>

</template>
<script setup>
	import {
		reactive,
		ref,
		computed
	} from "vue"
	import API from "@/api/index.js"
	import {
		route
	} from "@/uni_modules/uview-plus";
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		number
	} from "../../../uni_modules/uview-plus/libs/function/test";
	import amap from '@/static/amap-wx.130.js'

	let proInfo = reactive({
		price: '',
		type: ''
	})
	let oilInfo = reactive([])
	let oilPriceObj = reactive({})
	let oilPrice = ref(7.55)
	let oilPrice2 = ref(7.55)
	let oilDisc = ref({})
	let isOK = ref(true)

	const list = reactive([])
	// 计算油币抵扣后的价格
	const Price = computed(() => {
		console.log("oilDisc.value", oilDisc.value, couponData.value, uni.getStorageSync('userInfo').oilCoin);
		let price;
		if ((oilDisc.value?.minAmount < buyprice.value < oilDisc.value?.maxAmount) && 10) {
			// 如果金额输入值在设置值范围内 并且该账户下有油币 ******把10替换成uni.getStorageSync('userInfo').oilCoin
			// return Math.ceil(buyprice.value- 10* oilDisc.value.oilCoinConsumptionRatio)
			price = Math.ceil(buyprice.value - 10 * oilDisc.value.oilCoinConsumptionRatio)

		} else {
			return buyprice.value
		}
		if (couponData.value.couponId) {
			// 如果使用了优惠券
			if (couponData.value.couponInfo.ctype == '抵扣券' || couponData.value.couponInfo.ctype == '满减券') {
				// 判断是否能够优惠券和加油币同享优惠
				price = couponData.value.couponInfo.isDeduction ? price - couponData.value.couponInfo.amount :
					buyprice.value - couponData.value.couponInfo.amount
			} else if (couponData.value.couponInfo.ctype == '折扣券') {
				// 先计算折扣 再计算油币优惠价
				// price = couponData.value.couponInfo.isDeduction?price*couponData.value.couponInfo.cardDisc:buyprice.value*couponData.value.couponInfo.cardDisc
				price = couponData.value.couponInfo.isDeduction ? buyprice.value * couponData.value.couponInfo
					.cardDisc - 10 * oilDisc.value.oilCoinConsumptionRatio : buyprice.value * couponData.value
					.couponInfo.cardDisc
			}
			if (couponData.value.couponInfo.isDeduction) {
				// 如果能够同享优惠 显示加油币
				isOK.value = true
			} else {
				isOK.value = false
			}
		}

		console.log("price", price);
		return price.toFixed(2)
	})
	onLoad(async (option) => {
		// 计算距离
		getDistance()
		// calculateDistance()
		console.log("商品信息", JSON.parse(option.data));
		Object.assign(proInfo, {
			...proInfo,
			...JSON.parse(option.data)
		})
		// 获取油枪信息
		let res = await API.getOilGun(proInfo.id)
		console.log("获取油枪信息", res);
		Object.assign(oilInfo, res.data)
		// 获取当前市场油价
		let res2 = await API.getOliProduct(uni.getStorageSync('location').province.replace('省', ''))
		console.log("获取当前市场油价", res2);
		Object.assign(oilPriceObj, res2.data)
	})
	onShow(() => {
		// 监听地址选择页面事件
		uni.$on('selectAddress', (res) => {
			console.log('selectAddress', res);
			addressData.value = res
			uni.$off('selectAddress')
		})
		// 监听优惠券选择
		uni.$on('selectCoupon', (res) => {
			console.log('selectCoupon', res);
			couponData.value = res
			uni.$off('selectCoupon')
		})
	})
	const detailPopup = ref(false)
	const discountsShow = ref(false)
	const oliShow = ref(false)
	const currentIndex = ref(-1)
	const current2Index = ref(-1)
	// 油品类型
	const typeList = reactive([{
		type: '汽油',
	}, {
		type: '柴油'
	}])
	// 油枪规格列表
	let spiceList = reactive([])
	// 油枪规格列表（去重后的）
	let spiceSetList = reactive([])
	// 油号列表
	let gunNumList = reactive([])
	// 路径规划到加油站的距离
	const routeDistance = ref(0)

	let typeTab = ref(-1)
	let priceTab = ref(-1)
	const buyprice = ref('')
	const addressData = ref({
		id: null,
		name: '',
		phone: '',
		isDefault: false,
		site: ''
	})
	const couponData = ref({
		id: null,
		price: ''
	})
	const buyData = ref({
		buyType: 0,
		oliType: 0,
		oliSubType: 0,
		deliveryMethod: 0,
		unit: 0,
		quantity: '',
		addressId: null,
	})

	const isPeiSong = async () => {
		let {
			data
		} = await API.isDelivery()

		if (data) {
			// 如果允许配送
			buyData.value.deliveryMethod = 1
		} else {
			uni.showToast({
				title: "该油站不支持配送服务",
				icon: "none"
			})
		}
	}
	const more = () => {
		uni.navigateTo({
			url: '/pages/gas_station_mall/gas_station_evaluate/index?sid=' + proInfo.id + '&list=' + JSON
				.stringify(list)
		})
		detailPopup.value = false
	}
	const check = () => {
		uni.navigateTo({
			url: '/pages/gas_station_mall/gas_station_qualification/index?companyId=' + proInfo.companyId
		})
		detailPopup.value = false
	}
	const getDistance = async () => {
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				try {
					var myAmapFun = new amap.AMapWX({
						key: '2e4db96d15617dbd7e96e58b86463ab2'
					});
					myAmapFun.getDrivingRoute({
						origin: `${res.longitude},${res.latitude}`,
						destination: `${proInfo.lng},${proInfo.lat}`,
						success: function(data) {
							var points = [];
							if (data.paths && data.paths[0] && data.paths[0].steps) {
								var steps = data.paths[0].steps;
								for (var i = 0; i < steps.length; i++) {
									var poLen = steps[i].polyline.split(';');
									for (var j = 0; j < poLen.length; j++) {
										points.push({
											longitude: parseFloat(poLen[j].split(
												',')[0]),
											latitude: parseFloat(poLen[j].split(
												',')[1])
										})
									}
								}
							}
							console.log("data 路线规划 米", data.paths[0].distance);
							// 更新距离和时间
							if (data.paths[0] && data.paths[0].distance) {
								routeDistance.value= data.paths[0].distance
							}
						}
					})
				} catch (err) {
					console.error('路线规划失败:', err)
				} finally {
					uni.hideLoading()
				}
			}
		});


	}
	const openDetail = async () => {
		// 获取当前油站平均分
		let res = await API.getScore(proInfo.id)
		console.log("平均分", res.data.toFixed(1));
		value.value = res.data.toFixed(1)
		// 获取当前油站标签统计
		let res2 = await API.getCount(proInfo.id)
		Object.assign(list, res2.data)
		console.log("标签统计", res2.data);

		detailPopup.value = true
		// let res = await API.getComment(proInfo.id)
		// console.log("res",res);
		// value.value = res.data[0].score
	}
	const distance = ref(null);
	const currentLocation = ref(null);
	// Haversine 距离计算公式
	const calculateHaversine = (lat1, lon1, lat2, lon2) => {
		const toRadians = (degree) => degree * (Math.PI / 180);
		const R = 6371; // 地球半径（公里）

		const dLat = toRadians(lat2 - lat1);
		const dLon = toRadians(lon2 - lon1);

		const a =
			Math.sin(dLat / 2) * Math.sin(dLat / 2) +
			Math.cos(toRadians(lat1)) *
			Math.cos(toRadians(lat2)) *
			Math.sin(dLon / 2) *
			Math.sin(dLon / 2);

		const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
		return R * c;
	};

	// 获取位置并计算距离
	const calculateDistance = async () => {
		try {
			const res = await new Promise((resolve, reject) => {
				uni.getLocation({
					type: 'wgs84',
					success: resolve,
					fail: reject,
				});
			});

			currentLocation.value = {
				lat: res.latitude,
				lon: res.longitude
			};

			distance.value = calculateHaversine(
				currentLocation.value.lat,
				currentLocation.value.lon,
				proInfo.lat,
				proInfo.lng
			);
		} catch (error) {
			console.error('获取位置失败:', error);
			uni.showToast({
				title: '无法获取位置，请检查权限设置',
				icon: 'none'
			})
			distance.value = null;
		}
	};
	// 导航到目标地址
	const navigateToTarget = () => {
		try {
			console.log(parseFloat(proInfo.lat), parseFloat(proInfo.lng));
			uni.openLocation({
				latitude: parseFloat(proInfo.lat),
				longitude: parseFloat(proInfo.lng),
				success: function() {
					console.log('success');
				}
			});
		} catch (error) {
			uni.showToast({
				title: '无法打开地图导航',
				icon: 'none'
			})
		}
	};
	/* 选择地址 */
	const selectAddress = () => {
		uni.navigateTo({
			url: '/pages/users/user_address_list/index?select=1'
		})
	}
	/* 选择优惠券 */
	const selectCoupon = () => {
		console.log("选择优惠券", buyprice.value, priceTab.value);
		if (buyprice.value == '') {
			uni.showToast({
				title: '请先选择购油金额！',
				icon: 'none'
			})
			return
		}
		if (priceTab.value == -1 && buyprice.value < 100) {
			uni.showToast({
				title: '购油金额不能小于100！',
				icon: 'none'
			})
			return
		}
		uni.navigateTo({
			url: '/pages/users/user_coupon/index?select=1&sid=' + proInfo.id + '&price=' + Number(buyprice
				.value)
		})
	}
	// 选择购油类型
	const changeType = async (data, index) => {
		typeTab.value = index
		proInfo.type = data.type
		oliShow.value = true
		// 每次打开先清空之前的数据
		spiceList.length = 0
		spiceSetList.length = 0
		gunNumList.length = 0
		if (typeTab.value != -1) {
			// proInfo.type = ''
			currentIndex.value = -1
			current2Index.value = -1
			proInfo.Gun = ''
			proInfo.GunNum = ''
		}
		// 查询对应条件的值 并去重
		const spiceSet = new Set();
		spiceList = oilInfo.filter(item => item.oilType == data.type)
		spiceList.forEach(item => {
			spiceSet.add(item.oilSpice);
		});
		Object.assign(spiceSetList, Array.from(spiceSet))
		console.log("选择购油类型", spiceSetList, oilInfo);
	}
	// 选择油号 查询出油枪
	const getGunNum = async (data, index) => {
		currentIndex.value = index
		proInfo.Gun = data
		// let res = await API.getOilGun(JSON.stringify(item))
		let res = spiceList.filter(item => item.oilSpice == data)
		Object.assign(gunNumList, Array.from(res))
		console.log("油枪数据", spiceList, data, res);
		// 当前油号对应市场指导价
		let filter = data.replace('#', '')
		// 获取所有键并筛选包含过滤条件的键
		const matchedKeys = Object.keys(oilPriceObj).filter(key => key.includes(filter));
		oilPrice.value = oilPriceObj[matchedKeys[0]]
		console.log('指导价 筛选结果:', oilPriceObj, filter, matchedKeys, oilPrice.value);
		// 查询油号对应 油站价 
		let res2 = proInfo.gasPrice.filter(item => item.name == res[0].oilType && item.spice == filter)
		oilPrice2.value = res2[0]?.price
		console.log('油站价', res2[0]);
	}
	// 选择油枪
	const changeGunNum = (data, index) => {
		current2Index.value = index
		proInfo.GunNum = data.gunNum

		oliShow.value = false
		console.log("所选油枪", data, index);
	}
	// 选择购油金额
	const changePrice = async (data, index) => {
		couponData.value = ''
		isOK.value = true
		buyprice.value = data.price
		let res = await API.getOliCoinSell('123', buyprice.value)
		oilDisc.value = res.data[0]
	}
	// 跳转支付
	const goPay = async () => {
		console.log("商品信息", proInfo, "收货地址", addressData.value, "优惠券", couponData.value, "购油金额", buyprice.value,
			"优惠后金额", Price.value, "提油方式", buyData.value.deliveryMethod);
		if (proInfo.type == '' || proInfo.GunNum == '' || proInfo.Gun == '') {
			uni.showToast({
				title: '请先选择购油类型！',
				icon: 'none'
			})
			return
		}
		if (!buyprice.value) {
			uni.showToast({
				title: '请先选择购油金额！',
				icon: 'none'
			})
			return
		}
		if (buyData.value.deliveryMethod == 1 && !addressData.value.id) {
			// 选择配送方式 需要选择地址
			uni.showModal({
				title: "提示",
				content: '您选择了配送方式，需要选择收货地址！',
				icon: 'none',
				showCancel: false
			})
			return
		}

		// 模拟下单成功
		uni.navigateTo({
			url:'/pages/goods/cashier/index?order_id=111'+'&price='+Price.value+'&proInfo='+JSON.stringify(proInfo)+'&addressData='+(buyData.value.deliveryMethod == 1?JSON.stringify(addressData.value):null)+'&routeDistance='+routeDistance.value
		})
		
		// let id = await API.uuid()
		// let user = uni.getStorageSync('userInfo')
		// let data = JSON.stringify({
		// 	// 后台修改信息 必要字段------------------
		// 	Id: user.id ? user.id : id.data,
		// 	// Id:id.data,
		// 	RegisterUserId: user.id,
		// 	RegisterDeptId: user.deptId,
		// 	RegisteTime: user.registeTime,
		// 	editUserId: user.id,
		// 	EditTime: +new Date(),
		// 	RegisterInfo: null,
		// 	EditUserInfo: null,
		// 	RegisterDept: null,
		// 	// --------------------------
		// 	"isDel": false,
		// 	"oType": proInfo.type,
		// 	"state": "未支付",
		// 	"amount": Number(buyprice.value),
		// 	"disAmount": Number(buyprice.value)-Number(Price.value),
		// 	"payAmount": Number(Price.value),
		// 	"num": (Number(buyprice.value)/oilPrice.value).toFixed(2)-0.01,
		// 	"oilName": proInfo.name,
		// 	"oilCoin": uni.getStorageSync('userInfo').oilCoin,
		// 	"couponId": couponData.value ? couponData.value.couponId : '',
		// 	"sendUser": buyData.value.deliveryMethod == 1?"送货员ID":"",
		// 	"sendNum": buyData.value.deliveryMethod == 1?"送货员取货码":"",
		// 	"codeNum": buyData.value.deliveryMethod == 1?"客户取货码":"",
		// 	"gasStationId": proInfo.id,
		// 	"isInvoice": true,
		// 	"userId": uni.getStorageSync('userInfo').id,
		// 	"lockVideo": buyData.value.deliveryMethod == 1?"上锁视频":"",
		// 	"unlockVideo": buyData.value.deliveryMethod == 1?"解锁视频":"",
		// 	"shippingFee": 0,
		// 	"distance": Number(routeDistance.value)/1000,//路径规划距离 单位/公里
		// 	"addressId": addressData.value?addressData.value.id:'',
		// 	"isFreeAct": proInfo.freeSettings.length>0?true:false,
		// 	"userInfo": null
		// })
		// let res = await API.addOrder(data)
		// console.log("提交data",data,res);
		// if(res.code==1){
		// 	uni.showToast({
		// 		title:"下单成功,即将跳转支付页面..",
		// 		icon:"none"
		// 	})
		// 	uni.navigateTo({
		// 		url:'/pages/goods/cashier/index?order_id='+res.data+'&price='+Price.value+'&proInfo='+proInfo+'&addressData='+(buyData.value.deliveryMethod == 1?JSON.stringify(addressData.value):null)+'&routeDistance='+routeDistance.value
		// 	})
		// }else{
		// 	uni.showToast({
		// 		title:"下单失败,请先完成上一笔订单！",
		// 		icon:"none"
		// 	})
		// 	uni.navigateBack()
		// }
	}
	// 获取openid
	const getOpenid = () => {
		return new Promise((resolve, reject) => {
			uni.login({
				provider: 'weixin',
				success: (loginRes) => {
					// 将 code 发送到后端换取 openid
					uni.request({
						url: 'https://your-server.com/api/getOpenid',
						method: 'POST',
						data: {
							code: loginRes.code
						},
						success: (res) => {
							const openid = res.data.openid;
							uni.setStorageSync('openid', openid);
							resolve(openid);
						},
						fail: (err) => reject(err)
					});
				},
				fail: (err) => reject(err)
			});
		});
	}
	const buyPrice = async (e) => {
		console.log("ee", e);
		// priceTab.value = -1
		// proInfo.price = e
		let res = await API.getOliCoinSell('123', buyprice.value)
		console.log("res", res.data[0]);
		oilDisc.value = res.data[0]
	}
	const priceList = reactive([{
		price: '100',
		id: 1
	}, {
		price: '200',
		id: 2
	}, {
		price: '300',
		id: 3
	}])
	const count = ref(5);
	const value = ref(2);
</script>




<style lang="scss">
	.oliPopup {
		min-height: 500rpx;
		padding: 50rpx;
		display: flex;
		flex-direction: column;

		.active {
			background-color: #FF4110;
			color: #fff;
		}

		>text {
			font-weight: 600;
			margin: 20rpx 0;
		}

		view {
			display: flex;
			flex-wrap: wrap;

			text {
				padding: 10rpx 35rpx;
				margin: 10rpx 15rpx;
				border-radius: 10rpx;
				border: 1px solid #FF4110;
			}
		}
	}

	.desc {
		color: #8a8a8a;
	}

	.container {
		padding: 20px;
		text-align: center;
	}

	button {
		margin: 20px 0;
		padding: 10px 20px;
		background-color: #007AFF;
		color: white;
		border-radius: 5px;
	}

	.error {
		color: red;
		margin-top: 10px;
	}

	.result {
		font-size: 24rpx;
	}

	.method {
		margin-top: 30rpx;
		background-color: white;
		padding: 25rpx 20rpx;
		border-radius: 20rpx;

		.deliveryMethod {
			padding: 8rpx 20rpx;
			border: 1px solid #82848f;
			font-size: 12px;
		}

		.active {
			background-color: $u-primary;
			border-color: $u-primary;
			color: #fff;
		}
	}

	.address {
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #525252;
	}

	.card {
		margin-top: 20rpx;
		background-color: white;
		padding: 25rpx 20rpx;
		border-radius: 20rpx;
	}

	.header {
		z-index: 999;
		position: relative;
		border-radius: 30rpx;
		background-color: #fff;
		padding: 20rpx;

		.intro {
			margin-left: 20rpx;
			width: 100%;

			.one {
				.address {
					background-color: #FAFAFA;
					// background-color: red;
					padding: 10rpx 16rpx;
					height: 20rpx;
					font-size: 18rpx;
					border-radius: 20px;
					font-weight: 800;
				}
			}

			.tag-box {
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				margin-top: 4px;
				box-sizing: border-box;
				width: 100%;

				.tag {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 16px;
					font-size: 18rpx;
					padding: 0 4px;
					color: #333;
					border-radius: 2px;
					background-color: #fff;
					margin-right: 4px;
					color: $u-primary;
					border: 0.5px solid $u-primary;
				}
			}
		}

		.more {
			width: 80rpx;
			font-size: 24rpx;
			color: #909399;
		}

		.oil-price {
			display: flex;


			.item {
				padding: 0 10rpx;
				color: $u-primary;
				align-self: flex-end;

				.one {
					font-weight: 800;
					font-size: 50 rpx;
				}

				&~.item {
					position: relative;
					font-size: 24rpx;
					color: $u-info;
					font-weight: 400;

					&:before {
						content: '';
						position: absolute;
						width: 1rpx;
						height: 22rpx;
						top: 55%;
						margin-top: -12rpx;
						background-color: $u-info;
						left: 0;
					}
				}
			}
		}

		.youhui {
			padding: 5rpx 10rpx;
			background-color: #FFF1E9;
			color: $u-primary;
			font-size: 24rpx;
		}
	}

	.oil-type {
		border-radius: 30rpx;
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;

		.box {
			background-color: #F5F5F5;
			padding: 25rpx 50rpx;
			font-weight: 800;
			font-size: 18px;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}

		.active {
			background-color: #ff4110;
			color: #fff;
			// box-shadow: 0 0 3px 1px #ff4110;
		}
	}

	.price-box {
		border-radius: 30rpx;
		background-color: #fff;
		padding: 30rpx;

		.recommend {
			flex-wrap: wrap;

			.item {
				background-color: #F5F5F5;
				padding: 25rpx 45rpx;
				font-weight: 800;
				font-size: 18px;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}

			.active {
				background-color: #ff4110;
				color: #fff;
				box-shadow: 0 0 3px 1px #ff4110;
			}
		}


		.input {
			border: 1px solid $u-primary;
			border-radius: 20rpx;
			background-color: #FFF1E9;
			padding: 20rpx 20rpx;
			margin-top: 10rpx;
		}
	}

	.coupon {
		border-radius: 30rpx;
		background-color: #fff;
		padding: 30rpx;
		text-align: center;

		.title {
			font-weight: 800;
		}

		.cell {
			.item {
				font-size: 14px;

				.number {
					font-weight: 800;
				}
			}
		}
	}

	.footer {
		width: 100%;
		background-color: #fff;
		margin-top: 200rpx;
		padding: 20rpx 0;
		position: fixed;
		bottom: 0;

		.mingxi {
			text-align: center;
			box-shadow: 0 0 8px 1px #d2d2d2;
			border-radius: 10rpx;
			margin: 10rpx;
			padding: 5rpx 15rpx;
		}

		.price {
			margin-top: 6rpx;
			font-weight: 800;
			font-size: 20px;
			color: $u-primary;
		}

		.btn {
			width: 300rpx;
		}
	}

	.detailPopup {
		background-color: #F3F3F3;
		padding: 20rpx;
		padding-top: 30rpx;
		border-radius: 20rpx;

		.title {
			font-weight: 800;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.item {
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 20rpx;
			padding: 20rpx;

			.item-title {
				font-weight: 800;
			}

			.body {
				margin-top: 20rpx;
				font-size: 24rpx;

				.list {
					// margin-top: 15rpx;

					&-item {
						background-color: #F6F6F6;
						margin-right: 10rpx;
						// background-color: red;
						padding: 10rpx 20rpx;
						border-radius: 30rpx;
						margin-top: 15rpx;
						font-size: 24rpx !important;
					}
				}
			}

			.youjiantou {
				font-size: 24rpx;
				color: #909399;
			}
		}
	}

	.bg {
		width: 100%;
		height: 300rpx;
		position: absolute;
		top: 0;
		left: 0;

		background: linear-gradient(180deg, rgba(233, 51, 35, 0.91) 0%, rgba(233, 51, 35, 0.91) 23.61%, rgba(247, 247, 247, 1) 100%);
	}
</style>